import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class SearchNav extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
            keywords: props.keywords
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.keywords != this.props.keywords) {
            this.setState({
                keywords: nextProps.keywords
            }, this.onSubmitSearch)
        }
    }
    onSubmitSearch() {
    	const { dispatch, changeSearchKeywords, type } = this.props
    	let value = this.searchInput.value;

        if(type === 'category') {
            browserHistory.push(`/search?searchKey=${value}`)
        } else {
            dispatch({
                type: 'meyley/searchProduction',
                payload: {
                    keywords: value
                }
            })
            changeSearchKeywords && changeSearchKeywords(value)    
        }
    }
    onInputChange(e) {
        this.setState({
            keywords: e.target.value
        })
    }
	render() {
	 	return (
	 		<div className="search-nav">
	 			<NavBar 
                     mode="dark" 
                     iconName={null}
                     leftContent={[<i key={0} onClick={() => browserHistory.push('/')} className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-left-arrow']}`} style={{fontSize: '0.5rem', color: 'rgb(66, 62, 62)', position: 'relative', top: -10}}/>]} 
			         rightContent={[<span key={0} onClick={this.onSubmitSearch} className={styles['search-nav-spot']}>搜索</span>]}
			    >
			    	<input 
                        ref={view => this.searchInput = view} 
                        value={this.state.keywords}
                        placeholder="搜索关键字" 
                        onChange={this.onInputChange}
                        className={styles['search-nav-input']} 
                        />
			    </NavBar>
	 		</div>
	  	);
	}
};

SearchNav.propTypes = {
};

export default SearchNav
